<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制文字的粗细</title>
    <style>
        .box {
            /* 
            font-weight 属性用来控制文字的粗细
            1.normal 正常字体4
            2.bold 粗体
            3.bolder 更粗
            4.lighter 更细
            5.100-900 数值越大越粗，常用400(正常)和700(粗体)
            */

            font-weight: bold;
            font-size: 24px;
        }
        .container {
            font-weight: 600;
        }
        .container p {
            font-weight: lighter;
        }
    </style>
</head>
<body>
    <div class="box">
        font-weight用来控制页面文字的粗细
    </div> 
    
    <div class="container">
        我是父元素的文字
        <p>我是子元素的文字，我要更细一些</p>
    </div>
</body>
</html>